<?php
// PHPViddlerUploadify
// Version 0.1
// By: Colin Devroe - cdevroe@viddler.com
// http://code.google.com/p/phpviddleruploadify/
// http://developers.viddler.com/

include('phpviddler/phpviddlerUploadify.php');
$viddler = new PhpviddlerUploadify(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>PHPViddlerUploadify Example</title>
		
		<!-- jQUERY 1.3.2 -->
		<script type="text/javascript" src="phpviddler/js/jquery-1.3.2.min.js" ></script>
		
		<!-- jQuery plugin : Uploadify -->
		<script type="text/javascript" src="phpviddler/js/uploadify/jquery.uploadify.js"></script>
		
		<style type="text/css">
			form label.error { color: red; }
			small { font-size: 0.7em; }

		    /*
		    Default style definitions for:
		
		    Uploadify v1.6.2
		    Copyright (C) 2009 by Ronnie Garcia
		    Co-developed by Travis Nickels
		    Edited by: Colin Devroe.
		    */
		    body { 
		        color: #262626; 
		        font-size: 0.9em; 
		        font-family: tahoma, arial, helvetica, sans-serif;
		    }
		
			#completed { 
				margin: 10px 0;
			}
			
			#completed p {
				text-align: right;
				margin: 0;
				padding: 0 20px 0 0;
				font-size: 0.8em;
			}
		
		
		    /*Basics ****************************************************/
		
		    .fileUploadQueue { 
		    font-size: 12px 
		    }
		    .fileUploadQueueItem { 
		        background-color: #262626; 
		        color: #fff;
		        margin-top: 10px; 
		        padding: 8px 10px; 
		        width: 234px; 
		        border: solid 1px #000; 
		        -moz-border-radius: 4px; 
		        -webkit-border-radius: 4px    
		    }
		    .fileUploadQueueItem .cancel {
		        float: right;
		    }
		    .fileUploadProgress   { 
		        background-color: #666; 
		        margin-top: 10px; 
		        width: 100%; 
		        border-style: solid; 
		        border-width: 1px 1px 0 0; 
		        border-color: #000 #656565 #656565 #000 
		    }
		    .fileUploadProgressBar { 
		        background: #000 url("progressbar4px.jpg") repeat-x 0 50%; 
		        height: 4px 
		    }
		
		
		    /*Start and Clear Queue Buttons ****************************/
		
		    #fileUploaderButtons { 
		            margin: 0; 
		            padding: 0; 
		            position: relative; 
		            width: auto; 
		            height: auto 
		    }
		
		    .uploadButton a    { 
		        color: #ccc; 
		        font-size: 12px; 
		        font-weight: bold; 
		        line-height: 18px; 
		        text-decoration: none; 
		        background-color: #262626; 
		        background-repeat: no-repeat; 
		        background-attachment: scroll; 
		        background-position: left top; 
		        text-align: center; 
		        cursor: pointer; 
		        display: inline-block; 
		        margin: 0 auto; 
		        padding: 0 8px; 
		        width: 104px; 
		        height: 18px; 
		        border: solid 1px #111; 
		        -moz-border-radius: 4px; 
		        -webkit-border-radius: 4px; 
		        text-shadow: #000 0px 1px 0px     
		    }
		
		    .uploadButton a:link { 
		        color: #d5d5d5; 
		        text-decoration: none 
		    }
		
		    .uploadButton a:visited { 
		        color: #d5d5d5; 
		        text-decoration: none 
		    }
		
		    .uploadButton a:hover,  a:active { 
		        color: #990; 
		        text-decoration: none; 
		        background-position: 0 -20px 
		    }
		
		    .clearQueue a:hover, a:active { 
		        color: #900; 
		        text-decoration: none 
		    }
		
		
		
		
		    /*Browse Button ******************************************/
		
		    #fileUploader { 
		        color: #ccc; 
		        margin: 0 0 10px; 
		        padding: 0; 
		        position: relative; 
		        width: 255px; 
		        height: auto 
		    }
		
		    #fileUploader:hover { 
		        color: #990; 
		        text-decoration: none 
		    }
		
		    .fileUploaderBtn  { 
		        margin: 0; 
		        padding: 0; 
		        position: relative; 
		        z-index: 99 
		    }
		
		    .fileUploaderTitle   { 
		        font-size: 12px; 
		        font-weight: bold; 
		        line-height: 18px; 
		        text-decoration: none;
		        background: #262626 url("add.png") no-repeat 10px 2px; 
		        text-align: center; 
		        cursor: pointer; 
		        display: inline-block; 
		        margin: 0; padding: 0; 
		        position: absolute; 
		        z-index: 0; 
		        top: 0; 
		        left: 0; 
		        width: 100%; 
		        height: 20px; 
		        border: solid 1px #111; 
		        -moz-border-radius: 4px; 
		        -webkit-border-radius: 4px; 
		        text-shadow: #000 0px 1px 0px       
		     }
		     
		</style>
		
	</head>
	<body>
					
	<?php if ($_GET['upload']=='success') { ?>
		
		<h1>Thanks for your upload!</h1>
		<p>Thank you for your video. You can check it by <a href="<?php echo $_GET['url']; ?>">going to Viddler</a>.</p>
		<p>Thank you,<br />
		The Viddler Team</p>
		
	<?php } else { ?>
	
		<h1>Upload your video to Viddler</h1>
		<form id="uploader" name="uploader" action="upload.php" enctype="multipart/form-data" method="post">
			<table>
			<tr>
				<td><label for="video">Video file:</label></td>
				<td><?php echo $viddler->Uploadify(); ?></td>
			</tr>
			<tr><td colspan="2"><div id="completed"></div></td></tr>
			<tr>
				<td><label for="title">Video Title:</label></td>
				<td><input size="35" type="text" name="title" id="title" class="required" /></td>
			</tr>
			<tr>
				<td><label for="description">Video Description:</label></td>
				<td><textarea name="description" id="description" cols="31" rows="12" class="required"></textarea></td>
			</tr>
			<tr>
				<td><label for="name">Tags:</label><br />
				<small>Separated by commas.</small></td>
				<td><input type="text" size="35" name="tags" id="tags"  class="required" /></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><input type="submit" value="Submit video" /></td>
			</tr>
			</table>
		</form>
<?php } // end if upload success  ?>
	</body>
</html>